<template>
	<div class="goods-dialog">
		<div class="goods-dialog-title">
			<div class="goods-dialog-title" @click="handleClick"><slot></slot></div>
			<el-dialog
				v-model="dialogVisible"
				:before-close="handleClose"
				title="选择原创"
                center
				width="880px"
				:destroy-on-close="true"
				:append-to-body="true"
			>
				<Table></Table>
				<template #footer>
					<el-button @click="handleClose">取 消</el-button>
					<el-button type="primary" @click="handleConfirm">确 定</el-button>
				</template>
			</el-dialog>
		</div>
	</div>
</template>
<script lang="jsx">
import Table from "./table.vue";
import { mapState, mapActions, mapMutations } from "vuex";
export default {
	components: {
		Table
	},
	provide() {
		return {
			self: this
		};
	},
	props: {
		modelValue: {
			type: [String, Number, Boolean, Object, Array],
			default: ""
		},
		data: {
			type: [String, Number, Boolean, Object, Array],
			default: ""
		},
		/**
		 * [visible description]
		 * @type {Object}
		 */
		select: {
			type: Boolean,
			default: false
		},
		/**
		 * 选择类型 radio | checkbox
		 * @type {Object}
		 */
		type: {
			type: String,
			default: "radio"
		},
		/**
		 * 执行的上传方法
		 * @type {Object}
		 */
		limit: {
			type: Number,
			default: 1
		}
	},
	data() {
		return {
			selectData: null,
			dialogVisible: false
		};
	},
	/**
	 * 计算属性
	 * @type {Object}
	 */
	computed: {},
	/**
	 * 页面渲染前
	 * @return {[type]} [description]
	 */
	created() {
		console.log(this.modeValue, "页面加载执行");
	},
	/**
	 * 数据监听
	 * @type {Object}
	 */
	watch: {},
	/**
	 * 页面加载执行
	 * @return {[type]} [description]
	 */
	async mounted() {
		if (this.type == "checkbox") {
			this.selectData = [];
		} else {
			this.selectData = {};
		}
	},
	methods: {
		...mapActions(["handleWeibo"]),
		/**
		 * 处理点击事件
		 * @return {[type]} [description]
		 */
		handleClick() {
			console.log("处理点击事件1",this.modelValue.length, Object.prototype.toString.call(this.modelValue) === "[object Object]");
			
			this.dialogVisible = true;
			if ( Object.prototype.toString.call(this.modelValue) === "[object Object]") {
				this.dialogVisible = true;
			} else {
				if (this.modelValue.length >= this.limit) {
					return;
				} else {
					this.dialogVisible = true;
				}
			}
		},
		/**
		 * 处理关闭事件
		 * @return {[type]} [description]
		 */
		handleClose() {
			this.dialogVisible = false;
		},
		/**
		 * 处理确认事件
		 * @return {[type]} [description]
		 */
		handleConfirm() {
			console.log('confirm---->',this.selectData);
			this.$emit("update:modelValue",this.selectData);
			this.$emit("confirm", this.selectData);
			this.dialogVisible = false;
		}
	}
};
</script>
<style lang="less" scoped>
@import "./style.less";
</style>
